<template>
    <div class="yb-login">
        <yb-header></yb-header>
        <el-carousel indicator-position="outside" arrow="never" height="410px" class="banner">
            <el-carousel-item v-for="item in banner" key="item">
                <img class="banner-img" :src="item.src">
            </el-carousel-item>
            <!-- 登录界面 -->
            <div class="yb-ban-box">
                <div class="login">
                    <div class="yb-form" v-if="userInfo">
                        <div class="label-info" style="border-bottom: 1px solid white;">欢迎使用油巴平台</div>
                        <div class="labelP-info" style="margin-top:20px">您登录的手机号为:</div>
                        <div class="labelP-info" style="color:#44b549;font-weight:600"><img src="../assets/user.png"
                                                                                            style="margin-right: 10px;vertical-align: middle;">{{userInfo.mobile}}
                        </div>
                        <el-button class="el-sub" type="primary" style="margin-top: 20px;" @click="toView">进入我的平台
                        </el-button>
                    </div>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="yb-form" v-else>
                        <div class="label">用户登录</div>
                        <el-form-item prop="adb" v-show="verify" label-width="0" class="adb">
                        </el-form-item>
                        <el-form-item prop="name" label-width="0">
                            <div class="el-user">
                                <img src="../assets/user.png">
                                <el-input v-model="ruleForm.name" auto-complete="off" class="el-inp"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item prop="pass" label-width="0">
                            <div class="el-pass">
                                <img src="../assets/pass.png">
                                <el-input type="password" v-model="ruleForm.pass" auto-complete="off"
                                          class="el-inp el-pass"
                                          @keyup.enter.native="submitForm('ruleForm')"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label-width="0" prop="memberPass">
                            <el-checkbox label="记住我" v-model="ruleForm.memberPass" name="memberPass"></el-checkbox>
                            <router-link to="retrieve">
                                <div class="link_href">忘记密码?</div>
                            </router-link>
                        </el-form-item>
                        <el-form-item label-width="0" class="normo">
                            <el-button class="el-sub" type="primary" @click="submitForm('ruleForm')" :disabled="lgoin"
                                       :class="disBtn">{{loginText}}
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <div class="QRcode">
                        <img style="width: 96px; height: 96px" src="../assets/weChat.jpg">
                        <div style="font-size: 12px;text-align: center;">微信端入口</div>
                    </div>
                </div>
            </div>
        </el-carousel>
        <!-- 页面展示信息 -->
        <div class="yb-login-info">
            <!-- 公告 -->
            <div class="yb-login-notice">
                <span class="yb-notice-title">最新公告</span>
                <div class="yb-notice-item">
                    <div class="yb-notice-list" v-for="item in notices" @click="linkTo(item.id)">
                        <span class="time">[{{item.createTime}}]</span>
                        <div class="label">{{item.title}}</div>
                    </div>
                </div>
                <router-link to="notice">
                    <span class="yb-notice-more">更多公告>></span>
                </router-link>
            </div>
            <!-- 信息展示 -->
            <div class="yb-woman">
                <div class="yb-woman-list" @click="linkShowTime(item.link)" v-for="item in suggests" :key="item.title">
                    <div class="logo"><img :src="item.src"></div>
                    <div class="title">{{item.title}}</div>
                    <div class="label">{{item.content}}</div>
                </div>

            </div>
        </div>
        <footer class="footer">
            Powered By 合一科技 & 风吟科技　Copyright © 2017-2018 All Rights Reserved.
        </footer>
    </div>
</template>

<script>
    import header from '../packages/header'
    import box from '../assets/box.png'
    import card from '../assets/card.png'
    import tool from '../assets/tool.png'
    import b1 from '../assets/baner/001.jpg'
    import b2 from '../assets/baner/002.jpg'
    import b3 from '../assets/baner/003.jpg'
    import md5 from 'js-md5'

    export default {
        name: 'hello',
        components: {
            'yb-header': header
        },
        computed: {
            userInfo: function () {
                return this.$store.state.userInfo
            }
        },
        created: function () {
            // 获得公告
            this.$ajax(
                'announcement/announceList',
                {
                    pageSize: 3,
                    pageNum: 1
                }
                , () => {
                },
                (content) => {
                    this.notices = content.resultList
                }, false)
        },
        data: function () {
            let validateAdb = (rule, value, callback) => {
                if (this.verify) {
                    callback(new Error(this.error))
                } else {
                    callback()
                }
            }
            let validateName = (rule, value, callback) => {
                let re = /^(\+86)?1[34578]\d{9}$/
                if (value === '') {
                    callback(new Error('请输入用户名'))
                    return
                }
                if (!re.test(value)) {
                    callback(new Error('请输入正确的电话号码'))
                    return
                }
                callback()
            }
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'))
                } else {
                    callback()
                }
            }
            return {
                loginText: '登录',
                ruleForm: {
                    name: '',
                    pass: '',
                    memberPass: true
                },
                lgoin: false,
                verify: false,
                rules: {
                    adb: [{
                        validator: validateAdb
                    }],
                    name: [{
                        validator: validateName,
                        trigger: 'blur'
                    }],
                    pass: [{
                        validator: validatePass,
                        trigger: 'blur'
                    }]
                },
                error: '',
                disBtn: {
                    'disBtn': false
                },
                banner: [{
                    src: b3
                }, {
                    src: b2
                }, {
                    src: b1
                }],
                // 公告内容
                notices: [],
                // 介绍内容
                suggests: [{
                    title: '油巴盒子',
                    src: box,
                    content: '加装盒子只需半小时，即可升级为物联网加油机 ，快速、高效',
                    link: 'boxShowTime'
                }, {
                    title: '油巴IC卡',
                    src: card,
                    content: '使用IC卡支付，既方便、安全也省时、省力， 无现金更便捷',
                    link: 'cardShowTime'
                }, {
                    title: '油巴平台',
                    src: tool,
                    content: '通过平台随时随地获取经营数据，一台手机即可完成所有操作',
                    link: 'sysShowTime'
                }]
            }
        },
        methods: {
            linkTo: function (id) {
                this.$router.push({
                    path: 'info',
                    query: {
                        id: id
                    }
                })
            },
            linkShowTime: function (path) {
                this.$router.push({
                    path: path
                })
            },
            toView: function () {
                this.$router.push('Home')
            },
            submitForm: function (formName) {
                this.verify = false
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.lgoin = true
                        this.disBtn['disBtn'] = true
                        this.loginText = "正在登录"
                        this.$ajax('login',
                            {
                                mobile: this.ruleForm.name,
                                password: md5(this.ruleForm.pass)
                            }
                            , () => {
                                this.lgoin = false
                                this.disBtn['disBtn'] = false
                                this.loginText = "登录"
                            },
                            (content) => {
                                this.$ajax(
                                    'mch/myInfo',
                                    {}
                                    , () => {
                                    },
                                    (content) => {
                                        //登录设置session
                                        this.$store.commit('setUserInfo', content)

                                    }, false)

                                if (content.actived == 0) {
                                    this.$router.push('welcome')
                                }
                                else {
                                    //跳转
                                    this.$router.push('home')
                                }
                            }, false)
                    } else {
                        return false
                    }
                })
            }
        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
    @import "../less/variables";

    .yb-login {
        background: #ffffff;
        font-size: 14px;
    }

    .banner {
        min-width: @layout-width;
        .yb-ban-box {
            width: @layout-width;
            margin: 0 auto;
            height: 410px;
        }
        .banner-img {
            position: relative;
            left: calc(~"(100% - 1920px) / 2");
            left: -moz-calc(~"(100% - 1920px) / 2");
            left: -webkit-calc(~"(100% - 1920px) / 2");
        }
    }

    .hidden {
        overflow: hidden;
        height: 100%;
        position: absolute;
        width: 100%;
    }

    .login {
        //width: 422px;
        display: flex;
        align-items: flex-start;
        position: relative;
        z-index: 200;
        float: right;
        top: 50px;
        .login-label {
            font-size: 18px;
        }
        .yb-form {
            padding: 20px;
            background: rgba(255, 255, 255, 0.9);
            width: 270px;
            .label {
                line-height: 40px;
            }
            .label-info {
                text-align: center;
                line-height: 52px;
                font-size: 18px;
            }
            input {
                width: 100% !important;
            }
            .labelP-info {
                text-align: center;
                line-height: 58px;
                font-size: 18px;
            }
            .disBtn {
                background: #aaabab !important;
                color: white;
                &:hover {
                    background: #aaabab !important;
                    color: white;
                }
            }
            .link_href {
                float: right;
                cursor: pointer;
            }
            .el-sub {
                background: #44b549;
                width: 100%;
                border: none;
            }
        }
    }

    .QRcode {
        margin-left: 5px;
        background: #ffffff;
        padding: 5px;
    }

    .yb-login-info {
        width: @layout-width;
        background: #ffffff;
        margin: 0 auto;
        .yb-notice-title {
            background: #333333;
            color: white;
            line-height: 20px;
            padding: 0 5px;
            height: 20px;
            margin-top: 26px;
        }
        .yb-login-notice {
            display: flex;
            line-height: 70px;
            .yb-notice-item {
                flex: 1;
                display: flex;
                .yb-notice-list {
                    flex: 1;
                    display: flex;
                    cursor: pointer;
                    &:hover {
                        text-decoration: underline;
                    }
                    .time {
                        color: #b8b8b8;
                        margin: 0 4px;
                    }
                    .label {
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
            .yb-notice-more {
                cursor: pointer;
            }
        }
        .yb-woman {
            display: flex;
            margin-top: 50px;
            margin-bottom: 70px;
            .yb-woman-list {
                flex: 1;
                width: 340px;
                height: 330px;
                border: 1px solid #e5e5e5;
                text-align: center;
                margin-right: 20px;
                cursor: pointer;
                &:last-child {
                    margin-right: 0px;
                }
                &:hover {
                    background: #f4f5f9;
                    text-decoration: none !important;
                }
                .logo {
                    height: 170px;
                    img {
                        display: block;
                        margin: 0 auto;
                        padding-top: 47.5px;
                    }
                }
                .title {
                    color: #494949;
                    font-size: 16px;
                    line-height: 30px;
                    margin-bottom: 10px;
                }
                .label {
                    padding: 0 50px;
                    font-size: 14px;
                    color: #8d8d8d;
                }
            }
        }
    }

    .el-user {
        position: relative;
        img {
            position: absolute;
            z-index: 99;
            top: 9px;
            left: 10px;
        }
        input {
            padding-left: 30px;
        }
    }

    .el-pass {
        img {
            position: absolute;
            z-index: 99;
            top: 9px;
            left: 10px;
        }
        input {
            padding-left: 30px;
        }
    }

    .footer {
        text-align: center;
        line-height: 80px;
        background: #b8b9b9;
        color: #ffffff;
    }

    .adb {
        height: auto;
        margin-bottom: 5px;
        .el-form-item__error {
            position: relative;
        }
    }

    .normo {
        margin-bottom: 0;
    }

</style>
